import React from 'react';
import * as FontAwesome from 'react-icons/lib/fa'
import { Link } from 'react-router'

var $ = require('jquery');

class PublicHeader extends React.Component {
    componentDidMount() {

    }
    componentWillUnmount() {

    }
    constructor(props) {
        super(props);
        this.state = {
            classType: "",
            contentType: '',
            firstBoolean: true,
            coreArr: [
                {link: "/Uwb", text: "人脸技术"},
                {link: "/Uwb", text: "物体检测"},
                {link: "/Uwb", text: "视觉问答"},
                {link: "/Uwb", text: "图像描述"},
                {link: "/Uwb", text: "视觉嵌入式技术"},
                {link: "/Uwb", text: "UWB传感器"},
                {link: "/Uwb", text: "定位导航系统"},
                {link: "/Uwb", text: "小型伺服舵机"},
                {link: "/Uwb", text: "双足步态控制"},
                {link: "/Uwb", text: "手眼协调抓取"},
                {link: "/Uwb", text: "机械臂安全柔性控制"}
            ],
            resourcesArr: [
                {link: "/Uwb", text: "文档中心"},
                {link: "/Uwb", text: "视频资源"}
            ],
            academicArr: [
                {link: "/Uwb", text: "论文中心"},
                {link: "/Uwb", text: "资讯中心"},
                {link: "/Uwb", text: "获奖与荣誉"}
            ]
        }
        this.handleClick = this.handleClick.bind(this);
        this.handleListCkick = this.handleListCkick.bind(this);
    }
    handleClick(tag,e){
        if(tag == 'show'){
            $(".ai-top-mode").show();
            $(".ai-slide-top").addClass('ai-slide-top-visible')
        }else{
            $(".ai-top-mode").hide();
            $(".ai-slide-top").removeClass('ai-slide-top-visible');
        }
        if(this.state.firstBoolean){
            this.handleListCkick('core');
            this.setState({
                firstBoolean: false
            });
        }
    }
    handleListCkick(keyStr,e){
        if(this.state.titleType == keyStr){
            this.setState({
                titleType: '',
                contentType: ''
            });
        }else{
            this.setState({
                titleType: keyStr,
                contentType: keyStr
            });
        }
    }
    menuList(arr){
        var PathArr = [];
        for(var i=0;i< arr.length; i++){
            PathArr.push(<li className="ai-slide-top-item" key={i}><Link to={arr[i].link}>{arr[i].text}</Link></li>);
        }
        console.log('PathAr=',PathArr);
        return PathArr;
    }
    render() {
        const coreContent = this.menuList(this.state.coreArr);
        const resourcesContent = this.menuList(this.state.resourcesArr);
        const academicContent = this.menuList(this.state.academicArr);
        const logoUrl = 'images/top/img_Logo_white.png';
        const coreName = this.state.titleType === "core" ? "ai-slide-top-title-icon ai-slide-top-title-icon-active":"ai-slide-top-title-icon";
        const resourcesName = this.state.titleType === "resources" ? "ai-slide-top-title-icon ai-slide-top-title-icon-active":"ai-slide-top-title-icon";
        const academicName = this.state.titleType === "academic" ? "ai-slide-top-title-icon ai-slide-top-title-icon-active":"ai-slide-top-title-icon";

        const coreContentName = this.state.contentType === "core" ? "ai-slide-top-content ai-slide-top-content-active":"ai-slide-top-content";
        const resourcesContentName = this.state.contentType === "resources" ? "ai-slide-top-content ai-slide-top-content-active":"ai-slide-top-content";
        const academicContentName = this.state.contentType === "academic" ? "ai-slide-top-content ai-slide-top-content-active":"ai-slide-top-content";
        return (
           <div className="ai-top-app">
               <div className="top-info">
                   <div className="top-info-icon">
                       <img src={logoUrl} className="top-info-logo"/>
                   </div>
                   <div className="top-info-btn" onClick={this.handleClick.bind(this,'show')}></div>
               </div>
               <div className="ai-top-mode" onClick={this.handleClick.bind(this,'hide')}></div>
               <div className="ai-slide-top">
                    <div className="ai-slide-top-title" onClick={this.handleListCkick.bind(this,'core')}>
                        核心技术
                        <span className={coreName}><FontAwesome.FaAngleDown /></span>
                    </div>
                   <div className={coreContentName}>
                        <ul className="ai-slide-item-wrapper">
                            {coreContent}
                        </ul>
                   </div>
                   <div className="ai-slide-top-title" onClick={this.handleListCkick.bind(this,'resources')}>
                       资源中心
                       <span className={resourcesName}><FontAwesome.FaAngleDown /></span>
                   </div>
                   <div className={resourcesContentName}>
                       <ul className="ai-slide-item-wrapper">
                           {resourcesContent}
                       </ul>
                   </div>
                   <div className="ai-slide-top-title" onClick={this.handleListCkick.bind(this,'academic')}>
                       学术动态
                       <span className={academicName}><FontAwesome.FaAngleDown /></span>
                   </div>
                   <div className={academicContentName}>
                       <ul className="ai-slide-item-wrapper">
                           {academicContent}
                       </ul>
                   </div>
               </div>
           </div>
        )}
}
//导出组件
module.exports = PublicHeader;